{% extends "layout.html" %}
{% block content %}
<div class="x-nav">
    <div class="layui-col-md6">
        <button class="layui-btn" onclick="x_admin_show('添加通道','channel4collect-edit.html',700,500)"><i
                class="layui-icon"></i>添加通道
        </button>
    </div>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body layui-anim layui-anim-up">
    <div class="layui-fluid">
        <table id="channelList" class="layui-table" lay-filter="channel"> </table>
    </div>
</div>
<style>
    .layui-fluid {
        position: relative;
        margin: 0 auto;
        padding: 0;
    }
    .x-body {
        padding: 0 20px;
    }
</style>
<script>
    var start, end, channelTitle;
    var channel_id = GetQueryString('channel_id');
    $(function () {
        layui.use(['table', 'form'], function () {
            var table = layui.table;
            var layer = layui.layer;
            table.render({
                elem: '#channelList'
                , height: 'full-70'
                , url: './channelList'
                , cols: [[
                    {title: 'ID', field: 'channel_id', align: 'center', sort: true, width: 100}
                    , {title: '名称', field: 'name', align: 'center', width: 200}
                    , {
                        title: '主机IP/com', field: 'host_ip', align: 'center', width: 260, templet: function (d) {
                            console.log(d)
                            if (d.protocol === "4") {
                                return d.com + "-" + d.host_ip;
                            } else if (!["7"].includes(d.protocol)) {
                                return d.host_ip;
                            } else {
                                return d.com;
                            }
                        }
                    }
                    , {
                        title: '端口号/波特率', field: 'port', align: 'center', width: 150, templet: function (d) {
                            if (d.protocol === "4")
                                return d.band_rate + "-" + d.port;
                            else if (!["7"].includes(d.protocol))
                                return d.port;
                            else if (d.channel_id === 0)
                                return "-";
                            else
                                return d.band_rate;
                        }
                    }
                    , {
                        title: '可用/停用', field: 'enable', align: 'center', width: 120, templet: function (d) {
                            if (d.enable === "1")
                                return "<span class='layui-bg-green'>可用</span>";
                            else
                                return "<span class='layui-bg-red'>停用</span>";

                        }
                    }
                    , {
                        title: '操作', fixed: 'right', align: 'center',templet: function (d){
                            var html = '';
                            if(["5","6","15","16"].includes(d.register_type)) {
                                html += "<button id='control' type='button' class='layui-btn layui-btn-sm' lay-event='control'><i class='layui-icon'>下发指令</i> </button>";
                                html += "<button type='button' class='layui-btn layui-btn-sm' lay-event='edit'><i class='layui-icon'>&#xe642;</i> </button>";
                                html += "<button type='button' class='layui-btn layui-btn-sm' lay-event='del'><i class='layui-icon'>&#xe640;</i></button>";
                            } else {
                                html += "<button id='state' type='button' class='layui-btn layui-btn-sm' lay-event='state'><i class='layui-icon'>状态</i></button>";
                                html += "<button id='dataTable' type='button' class='layui-btn layui-btn-sm' lay-event='dataTable'><i class='layui-icon'>数据点</i></button>";
                                html += "<button type='button' class='layui-btn layui-btn-sm' lay-event='edit'><i class='layui-icon'>&#xe642;</i> </button>";
                                html += "<button type='button' class='layui-btn layui-btn-sm' lay-event='del'><i class='layui-icon'>&#xe640;</i></button>";
                            }
                            return html;
                        }
                    }
                ]]
                , page: true
            });
            //监听表格复选框选择
            table.on('checkbox(channel)', function (obj) {
            });
            //监听工具条
            table.on('tool(channel)', function (obj) {
                var data = obj.data;
                switch (obj.event) {
                    case 'edit':
                        if(obj.data.channel_id==1){
                            layer.alert("默认通道不可编辑！");
                            return;
                        }
                        x_admin_show('编辑通道', 'channel4collect-edit.html?channel_id=' + obj.data.channel_id, 700, 550);
                        break;
                    case 'state':
                        if(obj.data.channel_id==1){
                            layer.alert("默认通道不可编辑！");
                            return;
                        }
                        x_admin_show('通道状态', 'channel4collect-state.html?channel_id=' + obj.data.channel_id, 700, 500);
                        break;
                    case 'control':
                        x_admin_show('下发数据','channel4collect-send-modbus.html?channel_id=' + obj.data.channel_id,750,500);
                        break;
                    case 'dataTable':
                        href = "./dataItem4collect/dataItem-list.html?channel_id=" + obj.data.channel_id;
                        openTab(href, obj.data.name + "通道数据点", 301);
                        break;
                    case 'del':
                        layer.confirm('确认删除？', function (index) {
                            if(obj.data.channel_id==1){
                                layer.alert("默认通道不可删除！");
                                return;
                            }
                            // console.log(obj.data);
                            data = {'channel_id': obj.data.channel_id};
                            $.ajax({
                                url: 'delChannel',
                                type: 'POST',
                                data: data,
                                success: function (data) {
                                    // console.log(data);
                                    if (data.code === 0) obj.del();
                                }
                            });
                            obj.del();
                            layer.close(index);
                        });
                        break;
                    default:
                }
            });
        });
    })
</script>
{% endblock %}